{% extends "bootstrap/base.html" %}

{% block title %}小於菟 MTranServer Web UI{% endblock %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
{% endblock %}

{% block content %}
<!-- 添加粒子背景容器 -->
<div id="particles-js"></div>

<div class="container mt-4" id="mainContent">
    <!-- 修改：添加Gitee按钮并修复框体样式 -->
    <div class="d-flex justify-content-end mb-3">
        <button id="themeToggle" class="custom-btn theme-toggle-btn mr-2">
            <i class="fas fa-moon"></i> 暗黑模式
        </button>
        <button class="custom-btn gitee-btn">
            <a href="https://gitee.com/Gitree-XiaoWuTu_admin/xiaowutu-mtranserver-web-ui" target="_blank" >
                <i class="fab fa-github"></i> Git仓库</a>
        </button>
    </div>
    
    <h1 class="mb-4 neon-text">🌐 小於菟 MTranServer Web UI</h1>

    <div class="alert alert-info" id="status">服务器状态：加载中...</div>

    <form id="translateForm">
        <div class="form-group">
            <label>语言方向</label>
            <div class="input-group">
                <input type="hidden" name="source_lang" id="source_lang" value="zh">
                <input type="hidden" name="target_lang" id="target_lang" value="en">
                <input type="text" class="form-control" id="lang_display" value="中文 → English" readonly>
                <div class="input-group-append">
                    <button type="button" class="custom-btn lang-toggle-btn" onclick="toggleLang()">
                        <i class="fas fa-exchange-alt"></i> 切换
                    </button>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="text">待翻译内容</label>
            <textarea class="form-control" name="text" rows="4" placeholder="请输入要翻译的内容..." required></textarea>
        </div>

        <button type="submit" class="custom-btn translate-btn">
            <i class="fas fa-language"></i> 翻译
        </button>
    </form>

    <hr>
    <div class="d-flex justify-content-between align-items-center">
        <h4>翻译结果：</h4>
        <button class="custom-btn copy-btn" onclick="copyTranslation()">
            <i class="far fa-copy"></i> 复制
        </button>
    </div>
    <div id="result" class="alert alert-success mt-2" style="white-space: pre-wrap; min-height: 120px;"></div>
    <div class="text-right mb-3">
        <a href="/admin" class="custom-btn admin-btn">
            <i class="fas fa-cog"></i> 管理员入口
        </a>
    </div>
</div>
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h5>解除限制</h5>
        <p>由于服务器运行需要费用，所以对大家的翻译进行了限制。</p>
        <p>限制当前为单个ip每23小时最多翻译33次。</p>
        <p>如果您实在需要翻译服务，则可找管理员获取授权。（当日首次授权无需费用，授权后当日可再次翻译33次）</p>
        <button class="custom-btn redeem-btn" data-toggle="collapse" data-target="#redeemCodePanel">
            <i class="fas fa-key"></i> 兑换授权码
        </button>
    </div>
    <div id="redeemCodePanel" class="collapse mt-2">
        <div class="input-group">
            <input type="text" class="form-control" id="authCodeInput" placeholder="输入33位授权码">
            <div class="input-group-append">
                <button class="custom-btn redeem-confirm-btn" onclick="redeemAuthCode()">兑换</button>
            </div>
        </div>
        <div id="redeemResult" class="mt-2"></div>
    </div>
</div>
<br>
<!-- 翻译历史记录栏 -->
<div id="historyPanel" class="history-panel">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="m-0">翻译历史</h4>
        <div>
            <button class="custom-btn export-btn mr-2" onclick="exportHistory()">
                <i class="fas fa-download"></i> 导出
            </button>
            <button class="custom-btn clear-btn" onclick="clearHistory()">
                <i class="fas fa-trash-alt"></i> 清空
            </button>
        </div>
    </div>
    <div class="mb-3">
        <input type="text" class="form-control" id="searchHistory" placeholder="搜索历史记录..." oninput="searchHistory(this.value)">
    </div>
    <ul class="list-group" id="history">
        <!-- 历史记录由JavaScript动态生成 -->
    </ul>
    <div id="historyEmpty" class="text-center text-muted py-4">
        <i class="fas fa-history fa-2x mb-2"></i>
        <p>暂无翻译历史记录</p>
    </div>
</div>

<!-- 右下角圆球按钮 -->
<div id="toggleHistoryBtn" class="toggle-history-btn">
    <i class="fas fa-history"></i>
</div>

<script>
    // 历史记录键名
    const HISTORY_KEY = 'translation_history';
    const MAX_HISTORY = 100;

    // 初始化历史记录
    function initHistory() {
        let history = loadHistory();
        renderHistory(history);

        // 检查是否有旧版会话历史记录（迁移）
        const sessionHistory = {{ session.get('history', []) | tojson }};
        if (sessionHistory.length > 0) {
            // 迁移旧数据
            history = [...sessionHistory, ...history];
            saveHistory(history);
            renderHistory(history);

            // 通知用户
            alert(`已迁移 ${sessionHistory.length} 条历史记录到本地存储`);

            // 清除服务器端历史记录
            fetch("/clear_history", { method: "POST" });
        }
    }

    // 加载历史记录
    function loadHistory() {
        const compressed = localStorage.getItem(HISTORY_KEY);
        if (!compressed) return [];

        try {
            // 解压缩数据
            const compressedData = atob(compressed);
            const uintArray = new Uint8Array(compressedData.length);
            for (let i = 0; i < compressedData.length; i++) {
                uintArray[i] = compressedData.charCodeAt(i);
            }

            const jsonStr = new TextDecoder().decode(pako.inflate(uintArray));
            return JSON.parse(jsonStr);
        } catch (e) {
            console.error("历史记录解析失败:", e);
            return [];
        }
    }

    // 保存历史记录
    function saveHistory(history) {
        // 限制最大记录数
        if (history.length > MAX_HISTORY) {
            history = history.slice(history.length - MAX_HISTORY);
        }

        try {
            // 压缩数据
            const jsonStr = JSON.stringify(history);
            const uintArray = pako.deflate(jsonStr);
            const compressed = btoa(String.fromCharCode.apply(null, uintArray));
            localStorage.setItem(HISTORY_KEY, compressed);
        } catch (e) {
            console.error("历史记录保存失败:", e);
        }
    }

    // 渲染历史记录
    function renderHistory(history, searchTerm = '') {
        const historyList = document.getElementById("history");
        const emptyMsg = document.getElementById("historyEmpty");

        if (history.length === 0) {
            historyList.innerHTML = "";
            emptyMsg.style.display = "block";
            return;
        }

        emptyMsg.style.display = "none";

        // 过滤搜索结果
        const filteredHistory = searchTerm
            ? history.filter(record =>
                record.source.includes(searchTerm) ||
                record.translated.includes(searchTerm))
            : history;

        if (filteredHistory.length === 0) {
            historyList.innerHTML = `<li class="list-group-item text-center text-muted">未找到匹配的历史记录</li>`;
            return;
        }

        historyList.innerHTML = filteredHistory.reverse().map((record, index) => `
            <li class="list-group-item history-item">
                <small class="text-muted">${record.timestamp}</small>
                <div class="my-2">
                    <span class="badge badge-light">原文</span>
                    <div class="source-text">${record.source}</div>
                </div>
                <div>
                    <span class="badge badge-light">译文</span>
                    <div class="translated-text">${record.translated}</div>
                </div>
                <button class="btn btn-sm btn-outline-danger btn-delete" onclick="deleteHistory(${record.id})">
                    <i class="fas fa-times"></i>
                </button>
            </li>
        `).join('');
    }

    // 服务器状态轮询
    function checkServerStatus() {
        fetch("/status")
            .then(response => response.json())
            .then(data => {
                document.getElementById("status").innerText = "服务器状态：" + data.status;
            })
            .catch(() => {
                document.getElementById("status").innerText = "服务器状态：检测失败";
            });

        // 每33秒检测一次
        setTimeout(checkServerStatus, 33000);
    }

    // 页面加载后初始化
    document.addEventListener("DOMContentLoaded", function() {
        checkServerStatus();
        initHistory();

        // 初始化历史记录面板状态
        const isMobile = window.innerWidth < 768;
        if (!isMobile) {
            historyPanel.classList.add("active");
            mainContent.classList.add("shifted");
        }
    });

    // 表单提交处理
    document.getElementById("translateForm").onsubmit = function (e) {
        e.preventDefault();
        const formData = new FormData(this);
        const text = formData.get("text");
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;

        if (!text.trim()) {
            alert("请输入要翻译的内容");
            return;
        }

        // 显示加载状态
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 翻译中...';
        submitBtn.disabled = true;

        fetch("/translate", {
            method: "POST",
            body: formData
        }).then(res => res.json())
          .then(data => {
              document.getElementById("result").innerText = data.translation;

              // 保存到历史记录
              const history = loadHistory();
              const newRecord = {
                  id: Date.now(), // 唯一ID
                  source: text,
                  translated: data.translation,
                  timestamp: data.timestamp || new Date().toLocaleString()
              };

              history.push(newRecord);
              saveHistory(history);
              renderHistory(history);
          })
          .catch(error => {
              document.getElementById("result").innerText = "翻译请求失败";
          })
          .finally(() => {
              submitBtn.innerHTML = originalText;
              submitBtn.disabled = false;
          });
    }

    // 删除历史记录
    function deleteHistory(id) {
        if (!confirm("确定要删除这条记录吗？")) return;

        const history = loadHistory();
        const newHistory = history.filter(record => record.id !== id);
        saveHistory(newHistory);
        renderHistory(newHistory);
    }

    // 清空所有历史记录
    function clearHistory() {
        if (!confirm("确定要清空所有历史记录吗？此操作不可撤销！")) return;

        localStorage.removeItem(HISTORY_KEY);
        renderHistory([]);
    }

    // 导出历史记录
    function exportHistory() {
        // 显示加载状态
        const originalText = this.innerHTML;
        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 导出中...';
        this.disabled = true;

        // 调用后端导出接口
        fetch("/export_user_history")
            .then(response => {
                if (!response.ok) {
                    throw new Error('导出失败');
                }
                return response.blob();
            })
            .then(blob => {
                // 创建下载链接
                const url = URL.createObjectURL(blob);
                const link = document.createElement("a");
                link.href = url;
                link.download = `翻译历史_${new Date().toISOString().slice(0, 10)}.xlsx`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            })
            .catch(error => {
                alert("导出失败: " + error.message);
            })
            .finally(() => {
                this.innerHTML = originalText;
                this.disabled = false;
            });
    }

    // 搜索历史记录
    function searchHistory(term) {
        const history = loadHistory();
        renderHistory(history, term);
    }

    // 语言切换功能
    function toggleLang() {
        const sourceInput = document.getElementById("source_lang");
        const targetInput = document.getElementById("target_lang");
        const display = document.getElementById("lang_display");

        if (sourceInput.value === "zh") {
            sourceInput.value = "en";
            targetInput.value = "zh";
            display.value = "English → 中文";
        } else {
            sourceInput.value = "zh";
            targetInput.value = "en";
            display.value = "中文 → English";
        }
    }

    // 复制翻译结果
    function copyTranslation() {
        const result = document.getElementById("result");
        const text = result.innerText;

        if (!text) {
            alert("没有内容可复制");
            return;
        }

        navigator.clipboard.writeText(text)
            .then(() => {
                const originalText = result.innerText;
                result.innerText = "✓ 已复制到剪贴板！";
                setTimeout(() => {
                    result.innerText = originalText;
                }, 1500);
            })
            .catch(err => {
                alert("复制失败: " + err);
            });
    }

    // 切换历史记录栏显示
    const historyPanel = document.getElementById("historyPanel");
    const toggleHistoryBtn = document.getElementById("toggleHistoryBtn");
    const mainContent = document.getElementById("mainContent");

    toggleHistoryBtn.onclick = function () {
        // 展开或关闭历史记录面板
        historyPanel.classList.toggle("active");
        mainContent.classList.toggle("shifted");
    }

    // 在JavaScript部分添加兑换函数
    function redeemAuthCode() {
        const code = document.getElementById('authCodeInput').value;
        if (!code || code.length !== 33) {
            showRedeemResult('请输入有效的33位授权码', 'danger');
            return;
        }

        showRedeemResult('<i class="fas fa-spinner fa-spin"></i> 处理中...', 'info');

        fetch("/redeem_code", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ code: code })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                showRedeemResult('<i class="fas fa-check-circle"></i> ' + data.message, 'success');
                // 更新状态显示
                document.getElementById('status').innerHTML = '服务器状态：<span class="text-success">限制已解除</span>';
            } else {
                showRedeemResult('<i class="fas fa-times-circle"></i> ' + data.message, 'danger');
            }
        })
        .catch(error => {
            showRedeemResult('<i class="fas fa-exclamation-triangle"></i> 网络错误，请重试', 'warning');
        });
    }

    function showRedeemResult(message, type) {
        const resultDiv = document.getElementById('redeemResult');
        resultDiv.innerHTML = `<div class="alert alert-${type}">${message}</div>`;

        // 3秒后自动清除结果
        if (type !== 'info') {
            setTimeout(() => {
                resultDiv.innerHTML = '';
            }, 3000);
        }
    }
</script>

<!-- 引入压缩库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>

<style>
    /* 全局样式优化 */
    body {
        background-color: #f8f9fa;
        padding-bottom: 60px;
        transition: all 0.3s ease;
    }

    .container {
        max-width: 800px;
        transition: all 0.3s ease;
        /* 新增：为亮色模式添加边框 */
        border: 1px solid #e0e0e0;
        border-radius: 15px;
    }

    .alert-success {
        background-color: #e8f4f8;
        border-color: #b6e0f5;
        color: #0c5460;
    }

    .history-item {
        position: relative;
        padding-right: 40px;
        transition: all 0.2s ease;
        border-radius: 8px;
        margin-bottom: 12px;
        border: 1px solid #eee;
    }

    .history-item:hover {
        background-color: #f8f9fa;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .source-text, .translated-text {
        word-break: break-word;
        padding: 5px 0;
    }

    .btn-delete {
        position: absolute;
        top: 10px;
        right: 10px;
        opacity: 0.5;
        transition: opacity 0.2s;
    }

    .history-item:hover .btn-delete {
        opacity: 1;
    }

    /* 历史记录面板样式 */
    .history-panel {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100%;
        background-color: white;
        padding: 20px;
        overflow-y: auto;
        transition: right 0.3s ease;
        box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    .history-panel.active {
        right: 0;
    }

    /* 右下角的圆球按钮 */
    .toggle-history-btn {
        position: fixed;
        right: 30px;
        bottom: 30px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
        z-index: 1050;
    }

    .toggle-history-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }

    /* 主内容移位 */
    .shifted {
        transform: translateX(-150px);
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .history-panel {
            width: 85%;
            right: -85%;
        }

        .shifted {
            transform: translateX(-42.5%);
        }

        .toggle-history-btn {
            right: 15px;
            bottom: 15px;
            width: 50px;
            height: 50px;
            font-size: 20px;
        }
    }

    /* 滚动条美化 */
    .history-panel::-webkit-scrollbar {
        width: 8px;
    }

    .history-panel::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .history-panel::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

    .history-panel::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    /* 空状态样式 */
    #historyEmpty {
        display: none;
    }
</style>

<!-- 引入Three.js库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>
    // 添加高级粒子效果初始化
    document.addEventListener("DOMContentLoaded", function() {
        // 初始化Three.js场景
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('particles-js').appendChild(renderer.domElement);
        
        // 创建粒子系统
        const particles = [];
        const particleCount = 500;
        const positions = new Float32Array(particleCount * 3);
        const colors = new Float32Array(particleCount * 3);
        
        // 创建粒子几何体
        const geometry = new THREE.BufferGeometry();
        
        // 初始化粒子位置和颜色
        for (let i = 0; i < particleCount; i++) {
            positions[i * 3] = (Math.random() - 0.5) * 20;
            positions[i * 3 + 1] = (Math.random() - 0.5) * 20;
            positions[i * 3 + 2] = (Math.random() - 0.5) * 20;
            
            // 随机颜色
            colors[i * 3] = Math.random();
            colors[i * 3 + 1] = Math.random();
            colors[i * 3 + 2] = Math.random();
        }
        
        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
        
        // 创建粒子材质
        const material = new THREE.PointsMaterial({
            size: 0.1,
            vertexColors: true,
            transparent: true,
            opacity: 0.7,
            sizeAttenuation: true
        });
        
        const particleSystem = new THREE.Points(geometry, material);
        scene.add(particleSystem);
        
        // 设置相机位置
        camera.position.z = 5;
        
        // 添加动画效果
        const clock = new THREE.Clock();
        const animate = function() {
            requestAnimationFrame(animate);
            
            const elapsedTime = clock.getElapsedTime();
            
            // 粒子动画
            const positions = particleSystem.geometry.attributes.position.array;
            for (let i = 0; i < particleCount; i++) {
                const idx = i * 3;
                
                // 添加正弦波动画
                positions[idx] += Math.sin(elapsedTime + i) * 0.01;
                positions[idx + 1] += Math.cos(elapsedTime + i) * 0.01;
                positions[idx + 2] += Math.sin(elapsedTime * 0.5 + i) * 0.01;
                
                // 边界检查
                if (Math.abs(positions[idx]) > 10) positions[idx] *= -0.5;
                if (Math.abs(positions[idx + 1]) > 10) positions[idx + 1] *= -0.5;
                if (Math.abs(positions[idx + 2]) > 10) positions[idx + 2] *= -0.5;
            }
            
            particleSystem.geometry.attributes.position.needsUpdate = true;
            
            // 旋转整个粒子系统
            particleSystem.rotation.x = elapsedTime * 0.1;
            particleSystem.rotation.y = elapsedTime * 0.15;
            
            renderer.render(scene, camera);
        };
        
        // 响应窗口大小变化
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        animate();

        // 暗黑模式切换功能
        const themeToggle = document.getElementById('themeToggle');
        const currentTheme = localStorage.getItem('theme') || 'light';
        
        if (currentTheme === 'dark') {
            document.body.classList.add('dark-mode');
            themeToggle.innerHTML = '<i class="fas fa-sun"></i> 亮色模式';
        }
        
        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            if (document.body.classList.contains('dark-mode')) {
                localStorage.setItem('theme', 'dark');
                themeToggle.innerHTML = '<i class="fas fa-sun"></i> 亮色模式';
            } else {
                localStorage.setItem('theme', 'light');
                themeToggle.innerHTML = '<i class="fas fa-moon"></i> 暗黑模式';
            }
        });
    });
</script>

<style>
    /* 优化粒子容器层级 */
    #particles-js {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;  /* 确保在背景层 */
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }
    
    /* 亮色模式下的背景优化 */
    body:not(.dark-mode) #particles-js {
        background: linear-gradient(135deg, #e0e7ff 0%, #d5e8ff 100%);
    }
    
    /* 暗黑模式下的背景优化 */
    body.dark-mode #particles-js {
        background: linear-gradient(135deg, #0f0c29 0%, #302b63 100%);
    }
    
    /* 确保内容容器有背景 */
    .container {
        background-color: rgba(255, 255, 255, 0.85);  /* 半透明白色背景 */
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    
    body.dark-mode .container {
        background-color: rgba(30, 30, 30, 0.85);  /* 半透明黑色背景 */
    }
    
    /* 增加内容区域的层级 */
    #mainContent {
        position: relative;
        z-index: 10;  /* 确保在粒子层之上 */
    }
    
    /* 暗黑模式样式 */
    body.dark-mode {
        background-color: #121212;
        color: #e0e0e0;
    }
    
    body.dark-mode .container {
        background-color: rgba(30, 30, 30, 0.9);
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 0 20px rgba(0, 100, 255, 0.3);
        /* 保留暗色模式边框效果 */
        border: 1px solid #444;
    }
    
    body.dark-mode .alert {
        background-color: rgba(40, 40, 40, 0.9);
        border: 1px solid #444;
        color: #e0e0e0; /* 添加文本颜色 */
    }
    
    body.dark-mode .form-control {
        background-color: #333;
        color: #fff;
        border: 1px solid #555;
    }
    
    body.dark-mode .btn {
        transition: all 0.3s ease;
    }
    
    /* 修复翻译结果框在暗黑模式下的白底问题 */
    body.dark-mode #result {
        background-color: rgba(40, 40, 40, 0.9);
        color: #e0e0e0;
    }
    
    /* 修复历史记录面板在暗黑模式下的白底问题 */
    body.dark-mode .history-panel {
        background-color: rgba(30, 30, 30, 0.95);
    }
    
    body.dark-mode .history-item {
        background-color: rgba(40, 40, 40, 0.8);
        border: 1px solid #444;
        color: #e0e0e0;
    }
    
    body.dark-mode .history-item:hover {
        background-color: rgba(50, 50, 50, 0.9);
    }
    
    /* 修复按钮在暗黑模式下的白底问题 */
    body.dark-mode .btn-outline-secondary {
        border-color: #666;
        color: #ccc;
    }
    
    body.dark-mode .btn-outline-secondary:hover {
        background-color: rgba(80, 80, 80, 0.3);
        border-color: #00ccff;
        color: #00ccff;
    }
    
    /* 修复输入框占位符颜色 */
    body.dark-mode ::placeholder {
        color: #999 !important;
    }
    
    /* 修复历史记录面板滚动条 */
    body.dark-mode .history-panel::-webkit-scrollbar-track {
        background: #222;
    }
    
    body.dark-mode .history-panel::-webkit-scrollbar-thumb {
        background: #555;
    }
    
    /* 修复空状态文本颜色 */
    body.dark-mode #historyEmpty {
        color: #aaa;
    }
    
    /* 霓虹文字效果 */
    .neon-text {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff;
        animation: glow 1.5s ease-in-out infinite alternate;
    }
    
    @keyframes glow {
        from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff; }
        to { text-shadow: 0 0 10px #fff, 0 0 20px #0ff, 0 0 30px #0ff; }
    }
    
    /* 按钮游戏化效果 */
    .btn {
        position: relative;
        overflow: hidden;
        border: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,100,255,0.4);
    }
    
    .btn-primary {
        background: linear-gradient(45deg, #0066ff, #00ccff);
        border: none;
    }
    
    .btn-outline-primary {
        border: 2px solid #0066ff;
        color: #0066ff;
    }
    
    .btn-outline-primary:hover {
        background: rgba(0, 102, 255, 0.1);
        color: #00ccff;
        border-color: #00ccff;
        box-shadow: 0 0 15px rgba(0, 204, 255, 0.5);
    }
    
    /* 输入框动效 */
    .form-control:focus {
        box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
        border-color: #00ccff;
    }
    
    /* 历史记录面板动效 */
    .history-panel {
        transition: right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    
    /* 结果框动效 */
    #result {
        transition: all 0.3s ease;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(0, 204, 255, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(0, 204, 255, 0); }
        100% { box-shadow: 0 0 0 0 rgba(0, 204, 255, 0); }
    }
    
    /* 响应式优化 */
    @media (max-width: 768px) {
        .neon-text {
            font-size: 1.8rem;
        }
        
        .btn {
            padding: 8px 16px;
            font-size: 0.9rem;
        }
    }
    
    /* 自定义按钮样式 */
    .custom-btn {
        position: relative;
        display: inline-block;
        padding: 12px 24px;
        margin: 5px;
        border: none;
        border-radius: 50px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
    
    .custom-btn:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: scale(0.9);
    }
    
    .custom-btn:hover:before {
        opacity: 1;
        transform: scale(1);
        animation: glowing 20s linear infinite;
    }
    
    @keyframes glowing {
        0% { background-position: 0 0; }
        50% { background-position: 400% 0; }
        100% { background-position: 0 0; }
    }
    
    .custom-btn:after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        background: #fff;
        border-radius: 48px;
        z-index: -1;
        transition: all 0.3s ease;
    }
    
    /* 不同按钮的个性化样式 */
    .translate-btn {
        background: linear-gradient(45deg, #0066ff, #00ccff);
        color: white;
        font-size: 18px;
        padding: 15px 30px;
        box-shadow: 0 0 15px rgba(0, 204, 255, 0.5);
    }
    
    .translate-btn:after {
        background: linear-gradient(45deg, #0066ff, #00ccff);
    }
    
    .lang-toggle-btn {
        background: linear-gradient(45deg, #ff00cc, #ff6600);
        color: white;
    }
    
    .lang-toggle-btn:after {
        background: linear-gradient(45deg, #ff00cc, #ff6600);
    }
    
    .copy-btn {
        background: linear-gradient(45deg, #00cc66, #00ff99);
        color: white;
    }
    
    .copy-btn:after {
        background: linear-gradient(45deg, #00cc66, #00ff99);
    }
    
    .admin-btn {
        background: linear-gradient(45deg, #9900ff, #cc66ff);
        color: white;
    }
    
    .admin-btn:after {
        background: linear-gradient(45deg, #9900ff, #cc66ff);
    }
    
    .redeem-btn {
        background: linear-gradient(45deg, #ffcc00, #ff9900);
        color: white;
    }
    
    .redeem-btn:after {
        background: linear-gradient(45deg, #ffcc00, #ff9900);
    }
    
    .redeem-confirm-btn {
        background: linear-gradient(45deg, #00cc66, #00ff99);
        color: white;
        padding: 8px 20px;
    }
    
    .redeem-confirm-btn:after {
        background: linear-gradient(45deg, #00cc66, #00ff99);
    }
    
    .export-btn {
        background: linear-gradient(45deg, #0066cc, #0099ff);
        color: white;
        padding: 8px 15px;
    }
    
    .export-btn:after {
        background: linear-gradient(45deg, #0066cc, #0099ff);
    }
    
    .clear-btn {
        background: linear-gradient(45deg, #ff3333, #ff6666);
        color: white;
        padding: 8px 15px;
    }
    
    .clear-btn:after {
        background: linear-gradient(45deg, #ff3333, #ff6666);
    }
    
    .theme-toggle-btn {
        background: linear-gradient(45deg, #666666, #999999);
        color: white;
    }
    
    .theme-toggle-btn:after {
        background: linear-gradient(45deg, #666666, #999999);
    }
    
    /* 按钮悬停效果 */
    .custom-btn:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }
    
    .custom-btn:active {
        transform: translateY(2px) scale(0.98);
    }
    
    /* 按钮文字效果 */
    .custom-btn i {
        margin-right: 8px;
        transition: transform 0.3s ease;
    }
    
    .custom-btn:hover i {
        transform: rotate(15deg) scale(1.2);
    }

    /* 修复：确保所有容器在暗黑模式下样式统一 */
    body.dark-mode .container {
        background-color: rgba(30, 30, 30, 0.9);
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 0 20px rgba(0, 100, 255, 0.3);
    }
    
    /* 新增：Gitee按钮样式 */
    .gitee-btn {
        background: linear-gradient(45deg, #c71d23, #e74c3c);
        color: white;
    }
    
    .gitee-btn:after {
        background: linear-gradient(45deg, #c71d23, #e74c3c);
    }
    
    /* 修复：确保按钮在暗黑模式下样式统一 */
    body.dark-mode .custom-btn:after {
        background: #222;
    }
    
    body.dark-mode .custom-btn {
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 100, 255, 0.3);
    }
    
    body.dark-mode .custom-btn:hover {
        box-shadow: 0 10px 25px rgba(0, 204, 255, 0.5);
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .custom-btn {
            padding: 10px 20px;
            font-size: 14px;
        }
        
        .translate-btn {
            padding: 12px 24px;
            font-size: 16px;
        }
    }

</style>
{% endblock %}